<template>
  <div class="content">
    <div class="topBanner">
      <router-link
        :class="{ active: path === '/home/register' }"
        to="/home/register"
      >
        <div>
          <span>START FOR FREE</span>
        </div>
      </router-link>
    </div>
    <div class="one">
      <div class="one-content">
        <div class="one-num">
          <img src="@/assets/loginImgs/one.png" alt="">
        </div>
        <!-- <div class="one-text">
          <span class="text1">Linking and</span><span class="text2">management</span>
        </div> -->
        <!-- <div class="one-line">
          <span class="line1 line-common" /><span class="line2 line-common" />
        </div> -->
      </div>
      <div class="one-area">
        <div class="common-text">
          <div class="one-text">
            <span class="text1">Real Time</span><span class="text2">Monitoring</span>
          </div>
          <div class="common-des">
            <p>
              Monitoring data on multiple platforms and stores in real
              timeCurrently, shopmell has connected wi th shopify and
              woocommerce perfectly, You can monitor the sales data of your
              multiple stores on the shopmell platform in real time, and change
              your sales strategy in time.
            </p>
          </div>
        </div>
        <div class="common-image">
          <!-- <div class="image-bg" /> -->
          <div class="iamge-div">
            <img src="@/assets/loginImgs/oneRight.png" alt="">
          </div>
        </div>
      </div>
    </div>
    <div class="one">
      <div class="one-content">
        <div class="one-num">
          <img src="@/assets/loginImgs/two.png" alt="">
        </div>
        <!-- <div class="one-text">
          <span class="text1">Linking and</span><span class="text2">management</span>
        </div> -->
        <!-- <div class="one-line">
          <span class="line1 line-common" /><span class="line2 line-common" />
        </div> -->
      </div>
      <div class="one-area">
        <div class="common-image">
          <!-- <div class="image-bg" /> -->
          <div class="iamge-div">
            <img src="@/assets/loginImgs/twoLeft.png" alt="">
          </div>
        </div>
        <div class="common-text">
          <div class="one-text">
            <span class="text1">Fulfillment</span><span class="text2">Of Order</span>
          </div>
          <div class="common-des">
            <p>
              Fulfill orders more convenientlyCurrently, Shopmell builds a
              unique order fulfillment system to provide both online fulfillment
              and self-fulfillment services to you, it is with simple operation
              and convenient order management.
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="one">
      <div class="one-content">
        <div class="one-num">
          <img src="@/assets/loginImgs/three.png" alt="">
        </div>
        <!-- <div class="one-text">
          <span class="text1">Linking and</span><span class="text2">management</span>
        </div> -->
        <!-- <div class="one-line">
          <span class="line1 line-common" /><span class="line2 line-common" />
        </div> -->
      </div>
      <div class="one-area">
        <div class="common-text">
          <div class="one-text">
            <span class="text1">Rich Product</span><span class="text2">Resources</span>
          </div>
          <div class="common-des">
            <p>
              Rich product resources, multi-channel suppliers Shopmell
              integrates top quality suppliers from China, whether you are a POD
              seller or a dro pshipping seller, you are free to choose from
              those rich product resources.
            </p>
          </div>
        </div>
        <div class="common-image">
          <!-- <div class="image-bg" /> -->
          <div class="iamge-div">
            <img src="@/assets/loginImgs/threeRight.png" alt="">
          </div>
        </div>
      </div>
    </div>
    <div class="one">
      <div class="one-content">
        <div class="one-num">
          <img src="@/assets/loginImgs/four.png" alt="">
        </div>
        <!-- <div class="one-text">
          <span class="text1">Linking and</span><span class="text2">management</span>
        </div> -->
        <!-- <div class="one-line">
          <span class="line1 line-common" /><span class="line2 line-common" />
        </div> -->
      </div>
      <div class="one-area">
        <div class="common-image">
          <!-- <div class="image-bg" /> -->
          <div class="iamge-div">
            <img src="@/assets/loginImgs/fourLeft.png" alt="">
          </div>
        </div>
        <div class="common-text">
          <div class="one-text">
            <span class="text1">Multi-</span><span class="text2">Function</span>
          </div>
          <div class="common-des">
            <p>
              Multi-function product publicati on,save time and energy Shopmell
              is not only integrates and optimi zes traditional publishing
              methods,but also has an intelligent publishing system for POD
              sellers, and has a one-click publishing function.
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="one">
      <div class="one-content">
        <div class="one-num5">
          <img src="@/assets/loginImgs/five.png" alt="">
        </div>
        <!-- <div class="one-text">
          <span class="text1">Linking and</span><span class="text2">management</span>
        </div> -->
        <!-- <div class="one-line">
          <span class="line1 line-common" /><span class="line2 line-common" />
        </div> -->
      </div>
      <div class="one-area">
        <div class="common-text">
          <div class="one-text">
            <span class="text1">Assured</span><span class="text2">logistics</span>
          </div>
          <div class="common-des">
            <p>
              Shopmell provides a care-free logistics service, making sure the
              goods are delivered within 25 working days, guarantee overdue
              payment. It covers most countries in Europe and America. Check
              following details.
            </p>
          </div>
        </div>
        <div class="common-image">
          <!-- <div class="image-bg" /> -->
          <div class="iamge-div">
            <img src="@/assets/loginImgs/fiveRight.png" alt="">
          </div>
        </div>
      </div>
    </div>
    <div class="one">
      <div class="one-content">
        <div class="one-num5">
          <img src="@/assets/loginImgs/six.png" alt="">
        </div>
        <!-- <div class="one-text">
          <span class="text1">Linking and</span><span class="text2">management</span>
        </div> -->
        <!-- <div class="one-line">
          <span class="line1 line-common" /><span class="line2 line-common" />
        </div> -->
      </div>
      <div class="one-area">
        <div class="common-image">
          <!-- <div class="image-bg" /> -->
          <div class="iamge-div">
            <img src="@/assets/loginImgs/sixLeft.png" alt="">
          </div>
        </div>
        <div class="common-text">
          <div class="one-text">
            <span class="text1">Membership</span><span class="text2">Interests</span>
          </div>
          <div class="common-des">
            <p>
              Member rights and interests Care-free logistics, product with
              discounts, expedited orders, assur ed quality, intelligent
              publication, real-time log istics tracking.
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="last">
      <div class="one-content" style="margin-bottom:0">
        <div class="one-text last-text">
          <span class="text1">Why</span><span class="text2">Choose Us</span>
          <div>
            <img src="@/assets/loginImgs/sigle.png" alt="">
          </div>
        </div>
        <div class="one-line">
          <span class="line line-common" />
        </div>
      </div>
      <div class="last-image">
        <img src="@/assets/loginImgs/talk.png" alt="">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      path: ''
    };
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  margin-top: 70px;
}
@media screen and (max-width: 1200px) {
    .topBanner {
        background: url('../../assets/loginImgs/banner1.jpg') no-repeat;
        background-size: 100% 100%;
    }
}
@media screen and (min-width: 1200px) {
    .topBanner {
        background: url('../../assets/loginImgs/banner.jpg') no-repeat;
    }
}
.topBanner {
  width: 100%;
  height: 720px;
  min-width: 1200px;
  // background: url('../../assets/loginImgs/banner.jpg') no-repeat;
  border-bottom: 1px solid rgba(230, 230, 230, 1);
  background-size: 100% 100%;
  position: relative;
  div {
    padding: 15px 30px;
    position: absolute;
    left: 26%;
    bottom: 220px;
    background: rgba(2, 161, 82, 1);
    box-shadow: 0px 4px 10px rgba(2, 161, 82, 0.4);
    opacity: 1;
    border-radius: 4px;
    span {
      font-size: 26px;
      font-weight: bold;
      color: rgba(255, 255, 255, 1);
      opacity: 1;
    }
  }
}
.common-text {
  width: 557px;
  padding-top: 40px;
  .common-des {
    border-left: 8px solid #02a152;
    padding-left: 15px;
    margin-top: 30px;
    p {
      font-weight: 400;
      line-height: 30px;
      font-size: 20px;
      color: #666666;
      font-family: Segoe UI;
      letter-spacing: 0.7px;
    }
  }
}
.common-image {
  width: 600px;
  position: relative;
  background: linear-gradient(0deg, #d0d0d1 70%, transparent 30%);
  img {
    width: 100%;
    height: 100%;
  }
  // .image-bg {
  //   width: 600px;
  //   height: calc(100vw / 7.27);
  //   position: absolute;
  //   bottom: 0;
  //   left: 0;
  //   background: #D0D0D1;
  // }
  .iamge-div {
    width: 546px;
    height: 320px;
    margin: 0 auto;
    margin-bottom: 30px;
  }
}
.one,
.last {
  overflow: hidden;
  padding: 40px 0 0 0;
  &-area {
    width: 1200px;
    margin: 0 auto;
    padding-bottom: 90px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #e6e6e6;
  }
  &-content {
    text-align: center;
    // overflow: hidden;
    min-width: 1200px;
    padding-top: 20px;
    margin-bottom: 58px;
    // margin-top: calc(100vw / 48);
  }
  &-num {
    width: 69px;
    height: 50px;
    margin: 20px auto;
    img {
      width: 100%;
      height: 100%;
    }
  }
  &-num5 {
    width: 69px;
    height: 80px;
    margin: 20px auto;
    img {
      width: 100%;
      height: 100%;
    }
  }
  &-text {
    font-family: Segoe UI;
    .text1 {
      font-size: 30px;
      font-weight: bold;
      line-height: 40px;
      color: rgba(217, 217, 217, 1);
      opacity: 1;
    }
    .text2 {
      font-size: 30px;
      font-weight: bold;
      line-height: 40px;
      color: rgba(51, 51, 51, 1);
    }
  }
  &-line {
    .line-common {
      height: 6px;
      display: inline-block;
    }
    .line {
      width: 500px;
      background: #d9d9d9;
    }
    // .line1 {
    //   width: calc(100vw / 5.49);
    //   background: #14ac60;
    // }
    // .line2 {
    //   width: calc(100vw / 64);
    //   background: #d9d9d9;
    // }
    // .line3 {
    //   width: calc(100vw / 4.97);
    //   background: #14ac60;
    // }
    // .line4 {
    //   width: calc(100vw / 16);
    //   background: #14ac60;
    // }
  }
}
.last {
  padding: 80px;
  border-bottom: 1px solid #e6e6e6;
  &-text {
    width: 500px;
    height: 66px;
    margin: 0 auto;
    line-height: 66px;
    border: 4px solid #02a152;
    position: relative;
    > div {
      position: absolute;
      left: -14px;
      top: -24px;
    }
  }
  &-image {
    width: 1200px;
    margin: 0 auto;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
